<template>
  
  <!--头部-->
  <div class="top animate__animated animate__backInDown">
    <div class="span">第一届CTF比赛</div>
  </div>
  <div class="top2"></div>
  <div class="top3"></div>
  <!--左侧-->
  <div class="left animate__animated animate__backInLeft">
    <div class="top1">
      <div class="tit">
       排行榜<span style="font-size: 12px; margin-left: 5px">the charts</span>
      </div>
      <div
      
        v-for="(item, index) in newlist"
        :key="item.name"
      >
        <div class="one" v-show="index == 0">
          <div class="icon1"></div>
          <div>
            <img
              style="width: 15px"
              src="/public/img/xiegang.png"
              alt=""
              srcset=""
            />
          </div>
          <div class="wenzi" style="">
            <div style="font-size: 18px;">{{ item.name }}</div>
            <div style="color: #fe9931">{{ item.score }}</div>
          </div>
        </div>
        <div class="two" v-show="index == 1">
          <div class="icon2"></div>
          <div>
            <img
              style="width: 15px"
              src="/public/img/xiegang.png"
              alt=""
              srcset=""
            />
          </div>
          <div class="wenzi" style="">
            <div style="font-size: 18px">{{ item.name }}</div>
            <div style="color: #fe9931">{{ item.score }}</div>
          </div>
        </div>
        <div class="three" v-show="index == 2">
          <div class="icon3"></div>
          <div>
            <img
              style="width: 15px"
              src="/public/img/xiegang.png"
              alt=""
              srcset=""
            />
          </div>
          <div class="wenzi" style="">
            <div style="font-size: 18px">{{ item.name }}</div>
            <div style="color: #fe9931">{{ item.score }}</div>
          </div>
        </div>
        <div class="other" v-show="index != 0 && index != 1 && index != 2">
          <div style="width: 40px; text-align: center">{{ index + 1 }}</div>
          <div class="wenzi2" style="font-size: 14px; color: #cfd0d2">{{ item.name }}</div>
          <div style="">
            <div style="font-size: 18px"></div>
            <div style="color: transparent; /* 先将文字颜色设为透明 */
background: linear-gradient(to top, #9dc4f9, #ffffff);
-webkit-background-clip: text; /* Safari */
background-clip: text; /* 对于现代浏览器 */
">{{ item.score }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="left2"></div>
  <!--右侧-->
  <div class="right animate__animated animate__backInRight">
    <div class="top1">
      <div class="tit">
        <span style="font-size: 12px">real-time event</span> 实时事件
      </div>
      <!-- 实时事件内容 -->
      <div class="rightTOP">
        <div v-for="item in currentEvelist" :key="item" >
          <img src="/public/img/icon.png" class="icon21" alt="Icon" />
          <section style="overflow: hidden">
            <p class="time">{{ item.answerTime }}</p>
            <article class="contant">
              {{item.team}}完成 <span style="color: #4cfea8">{{ item.questionName }}</span> 答题
            </article>
            <span class="contant2">+{{ item.score }} </span>
          </section>
        </div>
      
      </div>
    </div>
    <div class="bot1">
      <div class="tit">
        <span style="font-size: 12px">Announcement</span> 比赛公告
      </div>
      <!-- 实时事件内容 -->
      <div class="rightBot">
        <div v-for="item in questnewlist" :key="item">
          <img src="/public/img/icon.png" class="icon21" alt="Icon" />
          <section style="overflow: hidden">
            <p class="time">{{ item.noticeTime }}</p>
            <article class="contant">{{ item.noticeContent }}</article>
          </section>
        </div>
      
      </div>
    </div>
  </div>
  <div class="right5"></div>
  <!-- 底部 -->
  <div class="bot animate__animated animate__backInUp"></div>
  <div class="center animate__animated animate__backInDown">
    <div>{{ timeH < 10 ? '0' + timeH : timeH }}</div>
    <span style="margin: 0 10px 2px 0px">H</span>
    <div>{{ timeM < 10 ? '0' + timeM : timeM }}</div>
    <span style="margin: 0 10px 2px 0px">M</span>

    <div>{{ timeS < 10 ? '0' + timeS : timeS }}</div>
    <span style="margin: 0 0 2px 0px">S</span>
  </div>
  <div class="bot2"></div>
</template>
<script>
export default {
  name: 'lesson8',
  props: {
    list: {
      type: Array,
      required: true
    },
    questionList: {
      type: Array,
      required: true,
    },
    currentEve: {
      type: Array,
      required: true,
    }
  },
  watch: {
  list: {
    handler(newVal) {
      console.log('List updated:', newVal);
      // 取前 15 项，若不足则取全部
      this.newlist = newVal.slice(0, 15);
    },
  },
  questionList: {
    handler(newVal) {
      console.log('监听   -------questionList:', newVal);
      // 取前 15 项，若不足则取全部
      this.questnewlist = newVal.slice(0, 5);
    },
    deep:true
  },
  currentEve: {
    handler(newVal) {
      console.log('监听   -------questionList:', newVal);
      // 取前 15 项，若不足则取全部
      this.currentEvelist = newVal.slice(0, 3);
    },
    deep:true
  },
},

  data() {
    return {
      timeH:10,
      timeM:10,
      timeS:10,
      timer:null,
      newlist : '',
      questnewlist : [{ answerTime: '2024', score: 10, team: '1111' }],
      currentEvelist:[]
    }
  },
  computed: {
    // 格式化时间显示
    formattedTime() {
      return `${this.formatNumber(this.timeH)}时 ${this.formatNumber(this.timeM)}分 ${this.formatNumber(this.timeS)}秒`;
    },
  },
  computed: {
    // 计算剩余时间
    remainingTime() {
      return this.timeH * 3600 + this.timeM * 60 + this.timeS;
    },
  },
  mounted() {
    this.startCountdown();

  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
methods: {
  startCountdown() {
      if (this.timer) clearInterval(this.timer);

      this.timer = setInterval(() => {
        if (this.remainingTime <= 0) {
          clearInterval(this.timer);
        } else {
          this.updateTime();
        }
      }, 1000);
    },
    updateTime() {
      if (this.timeS > 0) {
        this.timeS--;
      } else if (this.timeM > 0) {
        this.timeS = 59;
        this.timeM--;
      } else if (this.timeH > 0) {
        this.timeS = 59;
        this.timeM = 59;
        this.timeH--;
      }
    },
    formatNumber(num) {
      return num < 10 ? '0' + num : num;
    },
},
}
</script>
